<style lang="scss" scoped>

.check_list {
    border-bottom: 1px solid #ccc;

    .title {
        margin-top: 20px;
        margin-bottom: 20px;

    }

    .content {
        background: #f7f7f7;
        margin: 2px;
        margin-bottom: 20px;
        font-size: 12px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: gray;
    }

    .read {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .readNum {
            font-size: 12px;
            color: gray;
        }
    }
}

.doctor_info {
    display: flex;
    margin-bottom: 10px;
    color: gray;

    p {
        font-size: 12px;
        margin-left: 5px;
    }

    .san {
        text-align: center;
        color: rgb(255, 102, 0);
    }
}
.name{
     background: #fff;
    color: #ccc;

}
.hotList{
 width: 100%;
 height: 120px;
 border-bottom: 1px solid #ccc;
 dl{
    height: 100px;
    position: relative;
    margin-top: 20px;

    dt{
        float: left;
        margin: 10px;
        img{
            width: 125px;
            height: 85px;
        }
    }
    #tit{

      width: 200px;
word-wrap: break - word;
word-break: break - all;
      font-size: 15px;
      position: absolute;
      top: 10px;
      left: 150px;
    }
    .msg{
        position:   absolute;
        font-size: 13px;
        color: gray;
        margin-top: 70px;
        left: 150px;
    }
 }
}
</style>
<template>
    <div >
        <van-tabs v-model:active="active" :ellipsis="false">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-tab title="热门">
                    <div v-for="(item, index) in hot" :key="index" @click="goDetail2" class="hotList">
                        <!-- <van-card :title="item.title" :thumb="item.img">
                            <template #tags>
                                <van-tag class="name">{{ item.channel_name }}</van-tag>
                                <van-tag>{{ item.date_str }}</van-tag>
                            </template>
                        </van-card> -->

                            <dl>
                                <dt>
                                    <img :src="item.img" alt="">
                                </dt>
                                <dd id="tit">{{ item.title }}</dd>
                                <dd class="msg">{{ item.channel_name }}{{ item.date_str }}</dd>
                            </dl>

                    </div>
                </van-tab>

                <van-tab title="常见疾病">
                    <div>
                        <van-tabs v-model:active="active1" type="card">
                            <van-tab v-for="item in titleS" :key="item" :title="item">
                                <div v-for="v in check_list" :key="v" class="check_list">
                                    <p class="title">{{ v.topic_info.title }}</p>
                                    <div class="content">
                                        {{ v.topic_info.content }}
                                    </div>
                                    <div class="doctor_info">
                                        <img v-lazy=v.doctor_info.image alt="" width="20px">
                                        <p>{{ v.doctor_info.name }}</p>
                                        <p class="san">{{ v.doctor_info.tag }}</p>
                                        <p>{{ v.doctor_info.title }}</p>
                                        <p>{{ v.doctor_info.hospital }}</p>
                                    </div>
                                    <div class="read">
                                        <div></div>
                                        <div class="readNum">
                                            阅读{{ v.topic_info.read_num }}
                                        </div>
                                    </div>
                                </div>
                            </van-tab>
                        </van-tabs>
                    </div>

                </van-tab>
                <van-tab title="心理健康">
                    <div v-for="(item, index) in shen" :key="index" class="hotLeft">
                        <van-card :title="item.title" :thumb="item.img">
                            <template #tags>
                                <van-tag>{{ item.channel_name }}</van-tag>
                                <van-tag>{{ item.date_str }}</van-tag>
                            </template>
                        </van-card>
                    </div>
                </van-tab>
                <van-tab title="趣味评估">
                    <div v-for="(item, index) in mu" :key="index">
                        <van-card :title="item.title" :thumb="item.img">
                            <template #tags>
                                <van-tag>{{ item.channel_name }}</van-tag>
                                <van-tag>{{ item.date_str }}</van-tag>
                            </template>
                        </van-card>
                    </div>
                </van-tab>
                <!-- <van-tab title="辟谣">
                    <div v-for="(item, index) in pi" :key="index">
                        <van-card :title="item.title" :thumb="item.img">
                            <template #tags>
                                <van-tag>{{ item.channel_name }}</van-tag>
                                <van-tag>{{ item.date_str }}</van-tag>
                            </template>
                        </van-card>
                    </div>
                </van-tab> -->
            </van-list>
        </van-tabs>
    </div>

</template>

<script lang="ts" setup>
import { ref } from "vue"
import { getHot,getNormal,  getLeft, getMum, getRefute } from '../../../api/http'
import { useRouter } from "vue-router";

//tabs
const router =useRouter()
const active = ref(0)
const active1 = ref(0)
const titleS = ref({
    0: '全部',
    1: '语音',
    2: '简答',
    3: '图文'
})
//热点
const hot = ref<any>([])
const pageNum = ref(1)
function getHotList() {
    getHot(pageNum.value).then(res => {
        // console.log(res.data);
        // const { content_list } = res.data
        // console.log(content_list);
        hot.value = hot.value.concat(res.data.content_list)
    })

}
getHotList()

//专家科普
// current_page页数
const current_page = ref(1)
// has_more_page
const has_more_page = ref(true)

const check_list = ref<any>([])
function getKeList() {
    getNormal(pageNum.value).then(res => {
        const { page_info } = res.data
        current_page.value = page_info.current_page
        has_more_page.value = page_info.has_more_page
        check_list.value = check_list.value.concat(res.data.topic_check_list)
    })
}
getKeList()

//热点列表跳详情
const goDetail2 = () => {
router.push('/Stresstesting')
}


//生活
const shen = ref<any>(0)
 getLeft(pageNum.value).then(res => {
    shen.value = res.data.content_list
})
//母婴
const mu = ref<any>(0)
getMum(pageNum.value).then(res => {
    mu.value = res.data.content_list
})
//辟谣
const pi = ref<any>(0)
getRefute(pageNum.value).then(res => {
    pi.value = res.data.content_list
})

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        pageNum.value += 1

        getHotList()

        getKeList()
        // 加载状态结束
        loading.value = false;

        // // 数据全部加载完成
        if (hot.value.length >= 50) {
            finished.value = true;
        }
    }, 2000);
}
</script>

